/* eslint-disable react/no-multi-comp */
/* eslint-disable react/display-name */
import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import {
    List,
    ListItem,
    Typography,
    ListItemIcon,
    Divider,
    Button,
} from '@material-ui/core';
import { useSelector, useDispatch } from 'react-redux'
import { setProfile } from 'redux/actions/AuthActions';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
import { Image } from 'components/atoms';
import logoIcon from 'assets/images/logo_edit_playlist.png';

const useStyles = makeStyles(theme => ({
    root: {
        background: "#1C1C24"
    },
    listItem: {
        flexDirection: 'column',
        alignItems: 'flex-start',
    },
    navLink: {
        '&:hover': {
            color: theme.palette.primary.dark,
        },
    },
    listItemIcon: {
        minWidth: 'auto',
    },
    closeIcon: {
        justifyContent: 'flex-end',
        cursor: 'pointer',
    },
    menu: {
        display: 'flex',
    },
    menuItem: {
        marginRight: theme.spacing(8),
        '&:last-child': {
            marginRight: 0,
        },
    },
    menuGroupItem: {
        paddingTop: 0,
    },
    menuGroupTitle: {
        textTransform: 'uppercase',
    },
    divider: {
        width: '100%',
    },
    logoImage: {
        width: '100px',
        height: '60px',
    },
    logoContainer: {
      display:"flex",
      justifyContent:"center",
      padding:"20px 0"
    },
}));
const account = {
    title: 'Profile',
    id: 'profile',
    children: {
        settings: {
            groupTitle: 'Settings',
            pages: [
                {
                    title: 'General',
                    href: '/account/?pid=general',
                },
                {
                    title: 'Subscriptions',
                    href: '/account/?pid=subscriptions',
                },
                {
                    title: 'My Playlists',
                    href: '/account/edit_playlist',
                },
                {
                    title: 'My Profile',
                    href: '/account/my_profile',
                },
            ],
        },
        security: {
            groupTitle: 'Security',
            pages: [
                {
                    title: 'Password reset',
                    href: '/account/?pid=security',
                },
                {
                    title: 'Logout',
                    href: '/signup-cover',
                },
            ],
        }
    }
}

const LeftBar = props => {
    const { onClose, className, ...rest } = props;

    const classes = useStyles();
    const dispatch = useDispatch();
    const history = useHistory();


    const profileData = useSelector((state) => state.auth.profileData)

    const handleLogout = () => {
        dispatch(setProfile(null));
        history.replace('/');
    }

    const MenuGroup = props => {
        const { item } = props;
        return (
            <List disablePadding>
                <ListItem disableGutters>
                    <Typography
                        variant="body2"
                        color="primary"
                        className={classes.menuGroupTitle}
                    >
                        {item ? item.groupTitle : ''}
                    </Typography>
                </ListItem>
                {item && (
                    item.pages.map((page, i) => (
                        <ListItem disableGutters key={i} className={classes.menuGroupItem}>
                            {page.title == 'Logout' ? (
                                <Typography
                                    variant="body1"
                                    component={'a'}
                                    href="/"
                                    className={clsx(classes.navLink, 'submenu-item')}
                                    color="textSecondary"
                                    onClick={e => {
                                        e.stopPropagation()
                                        handleLogout()
                                    }}
                                >
                                    {page.title}
                                </Typography>
                            ) : (
                                <Typography
                                    variant="body1"
                                    component={'a'}
                                    href={page.href}
                                    className={clsx(classes.navLink, 'submenu-item')}
                                    color="textSecondary"
                                >
                                    {page.title}
                                </Typography>
                            )}
                        </ListItem>
                    ))
                )}
            </List>
        );
    };

    const AccountPages = () => {
        const { settings, security } = account.children;
        return (
            <div className={classes.menu}>
                <div className={classes.menuItem}>
                    <MenuGroup item={settings} />
                    <MenuGroup item={security} />
                </div>
            </div>
        );
    };

    return (
        <List {...rest} className={clsx(classes.root, className)}>
            <div className={classes.logoContainer}>
                <a href="/" title="thefront">
                    <Image
                        className={classes.logoImage}
                        src={logoIcon}
                        alt="thefront"
                        lazy={false}
                    />
                </a>
            </div>

            <ListItem className={classes.listItem}>
                <Typography
                    variant="h6"
                    component={'a'}
                    href={'/'}
                    color="textSecondary"
                    className={clsx(classes.navLink, 'submenu-item')}
                >
                    Home
                </Typography>
            </ListItem>

            <ListItem className={classes.listItem}>
                <Typography
                    variant="h6"
                    component={'a'}
                    href={'/discover'}
                    color="textSecondary"
                    className={clsx(classes.navLink, 'submenu-item')}
                >
                    Discover
                </Typography>
            </ListItem>

            <ListItem className={classes.listItem}>
                <Typography
                    variant="h6"
                    component={'a'}
                    href={'/publication'}
                    color="textSecondary"
                    className={clsx(classes.navLink, 'submenu-item')}
                >
                    Publication
                </Typography>
            </ListItem>

            <ListItem className={classes.listItem}>
                <Typography
                    variant="h6"
                    component={'a'}
                    href={'/community'}
                    color="textSecondary"
                    className={clsx(classes.navLink, 'submenu-item')}
                >
                    Community
                </Typography>
            </ListItem>

            <ListItem className={classes.listItem}>
                <Typography
                    variant="h6"
                    component={'a'}
                    href={'#'}
                    color="textSecondary"
                    className={clsx(classes.navLink, 'submenu-item')}
                >
                    Search
                </Typography>
            </ListItem>

            <ListItem className={classes.listItem}>
                <Typography
                    variant="h6"
                    component={'a'}
                    href={'/live-feed'}
                    color="textSecondary"
                    className={clsx(classes.navLink, 'submenu-item')}
                >
                    LiveFeed
                </Typography>
            </ListItem>

            <ListItem className={classes.listItem}>
                <Typography
                    variant="h6"
                    component={'a'}
                    href={'/voting'}
                    color="textSecondary"
                    className={clsx(classes.navLink, 'submenu-item')}
                >
                    Vote
                </Typography>
            </ListItem>

            <ListItem className={classes.listItem}>
                <Typography
                    variant="h6"
                    component={'a'}
                    href={'/shop'}
                    color="textSecondary"
                    className={clsx(classes.navLink, 'submenu-item')}
                >
                    Shop
                </Typography>
            </ListItem>

            {
                (profileData && profileData.id) ? (
                    <ListItem className={classes.listItem}>
                        <Typography variant="h6" color="primary" gutterBottom className={classes.menuGroupTitle}>
                            Account
                        </Typography>
                        <AccountPages />
                    </ListItem>
                ) : (
                    <ListItem className={classes.listItem}>
                        <Typography
                            variant="h6"
                            component={'a'}
                            href={'/signin'}
                            color="textSecondary"
                        >
                            Login
                        </Typography>
                    </ListItem>)
            }
        </List>
    );
};

LeftBar.propTypes = {
    className: PropTypes.string,
    pages: PropTypes.object.isRequired,
    onClose: PropTypes.func,
};

export default LeftBar;
